<extend name="Public/base"/>
<block name="style">
    <link rel="stylesheet" href="__JS__/daterangepicker/daterangepicker-bs3.css">
</block>
<block name="script">
    <!-- ChartJS 1.0.1 -->
    <script src="__ZUI__/lib/chart/zui.chart.min.js"></script>
    <!-- daterange picker -->
    
    <script src="__JS__/daterangepicker/moment.min.js"></script>
    <script src="__JS__/daterangepicker/daterangepicker.js"></script>

    <script>
        $(function () {
                var activeList = {$activeList};

                var data = {
                    // labels 数据包含依次在X轴上显示的文本标签
                    labels: activeList.labels,
                    datasets: [{
                        // 数据集名称，会在图例中显示
                        label: "按天",
                        // 颜色主题，可以是'#fff'、'rgb(255,0,0)'、'rgba(255,0,0,0.85)'、'red' 或 ZUI配色表中的颜色名称
                        // 或者指定为 'random' 来使用一个随机的颜色主题
                        //color: "red",
                        // 也可以不指定颜色主题，使用下面的值来分别应用颜色设置，这些值会覆盖color生成的主题颜色设置
                         fillColor: "rgba(23,182,200,0.2)",
                         strokeColor: "rgba(23,182,200,1)",
                         pointColor: "rgba(23,182,200,1)",
                         pointStrokeColor: "#fff",
                         pointHighlightFill: "#fff",
                         pointHighlightStroke: "rgba(220,220,220,1)",

                        // 数据集
                        data: activeList.datas.num
                    }]
                };

                var options = {
                ///Boolean - 是否在图表上显示网格
                scaleShowGridLines : true,

                //String - 网格线条颜色
                scaleGridLineColor : "rgba(0,0,0,.05)",

                //Number - 网格宽度
                scaleGridLineWidth : 1,

                //Boolean - 是否显示水平坐标，即X轴
                scaleShowHorizontalLines: true,

                //Boolean - 是否显示垂直坐标，即Y轴
                scaleShowVerticalLines: true,

                //Boolean - 是否显示为平滑曲线
                bezierCurve : true,

                //Number - 平滑曲线时所使用的贝塞尔曲线参数
                bezierCurveTension : 0.4,

                //Boolean - 是否显示顶点
                pointDot : true,

                //Number - 顶点半径，单位像素
                pointDotRadius : 4,

                //Number - 顶点描边线条宽度，单位像素
                pointDotStrokeWidth : 1,

                //Number - 检测鼠标点击所使用依据的半径大小，单位像素
                pointHitDetectionRadius : 20,

                //Boolean - 是否
                datasetStroke : true,

                //Number - 数据集线条宽度，单位为像素
                datasetStrokeWidth : 2,

                //Boolean - 是否用颜色来填充数据集
                datasetFill : true,

                }; // 图表配置项，可以留空来使用默认的配置

                var myLineChart = $("#activeChart").lineChart(data,options);

                var setLineChartData=function(msg){
                        data = {
                        labels: msg.labels,
                        datasets: [{
                        // 数据集名称，会在图例中显示
                        label: "按天",
                        // 颜色主题，可以是'#fff'、'rgb(255,0,0)'、'rgba(255,0,0,0.85)'、'red' 或 ZUI配色表中的颜色名称
                        // 或者指定为 'random' 来使用一个随机的颜色主题
                        //color: "red",
                        // 也可以不指定颜色主题，使用下面的值来分别应用颜色设置，这些值会覆盖color生成的主题颜色设置
                         fillColor: "rgba(23,182,200,0.2)",
                         strokeColor: "rgba(23,182,200,1)",
                         pointColor: "rgba(23,182,200,1)",
                         pointStrokeColor: "#fff",
                         pointHighlightFill: "#fff",
                         pointHighlightStroke: "rgba(220,220,220,1)",

                        // 数据集
                        data: msg.datas.num
                        }]
                    };
                }
                var refreshLineChart=function(){
                    $("#activeChart").remove();
                    $('.chart-box').append('<canvas id="activeChart" style="width:100%;height:450px"></canvas>');
                    var myLineChart = $("#activeChart").lineChart(data,options);
                }

                var startDate="{$options.startDate}",
                    endDate="{$options.endDate}";
                var type="{$type}";
                $('[name="type_show"]').click(function(){
                    type=$(this).val();
                    $.post("__SELF__", {type:type,startDate:startDate,endDate:endDate}, function (msg) {
                        if(msg.status==1){
                            console.log(msg);
                            setLineChartData(msg);
                            refreshLineChart();
                        }else{
                            handleAjax(msg);
                        }
                    });
                });

            $('#reservation').daterangepicker({
                locale:{
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                },
                format: 'YYYY-MM-DD',
                startDate:startDate,
                endDate:endDate,
                maxDate:endDate
            });

            $('#reservation').on('apply.daterangepicker',function(ev, picker) {
                $.post("__SELF__", {type:type,startDate:picker.startDate.format('YYYY-MM-DD'),endDate:picker.endDate.format('YYYY-MM-DD')}, function (msg) {
                    if(msg.status==1){
                        startDate=picker.startDate.format('YYYY-MM-DD');
                        endDate=picker.endDate.format('YYYY-MM-DD');
                        setLineChartData(msg);
                        refreshLineChart();
                    }else{
                        handleAjax(msg);
                    }
                });
            });
        });
    </script>
</block>
<block name="body">
    <include file="_top_nav"/>
    <!-- /.col (LEFT) -->
    <div class="clearfix with-padding">
        <!-- LINE CHART -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">活跃用户统计</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn" data-remote="{:U('Count/setActiveAction')}" data-toggle="modal">
                        <i class="icon icon-cog"></i> 设置
                        <!--设置-->
                    </button>
                    <!--<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>-->
                </div>
            </div>
            <div class="box-body">
                <div class="clearfix">
                    <button class="btn btn-link pull-left" id="reservation" style="font-size: 18px;">
                        <i class="icon icon-calendar"></i> 时段选择
                    </button>
                    <div class="checkbox_block pull-left">
                        <label><input type="radio" name="type_show" value="day" checked/>按日</label>
                        <label><input type="radio" name="type_show" value="week"/>按周</label>
                        <label><input type="radio" name="type_show" value="month"/>按月</label>
                    </div>
                </div>
                <div class="chart-box">
                    <!--图标插入位置-->
                    <canvas id="activeChart" style="width:100%;height:450px"></canvas>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col (RIGHT) -->
</block>
<block name="modal">
    <div class="modal fade" id="settingCount">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">{:L('_CLOSE_')}</span></button>
                    <h4 class="modal-title">{:L('_STATISTICS_SET_')}</h4>
                </div>
                <div class="modal-body">
                    <div class="with-padding">
                        <label>{:L('_DISPLAY_DAYS_DEFAULT_')} </label>
                        <input class="form-control" name="count_day" value="{$count.count_day}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn " data-role="saveCountSetting">
                        <i class="icon-ok"></i> {:L('_SAVE_')}
                    </button>
                    <button class="btn " data-dismiss="modal">
                        <i class="icon-remove"></i> {:L('_CANCEL_')}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('[data-role=saveCountSetting]').click(function () {
            $.post("__SELF__", {count_day: $('[name=count_day]').val()}, function (msg) {
                handleAjax(msg);
            });
        })
    </script>
</block>